<template>
	<view class="invite-wrap">
		<view class="invite-box">
			<view class="top">INVITE CODE：{{invite_code}}</view>
			<view class="code-wrap">
				<view class="tip">Screen capture to send and save QR code</view>
				<image class="code" :src="qr_code_url"/>
			</view>
			<view class="btn-wrap">
				<view class="btn">
					<!--  #ifdef  APP-PLUS -->
					<text @click="onCopy()">Copy share link</text>
					<!--  #endif -->
					<!--  #ifdef  H5 -->
					<text v-clipboard:copy="url" v-clipboard:success="onCopyByH5">Copy share link</text>
					<!--  #endif -->
				</view>
				<text>|</text>
				<view class="btn">
					<!--  #ifdef  APP-PLUS -->
					<text @click="onCopyCode()">Copy Invite Code</text>
					<!--  #endif -->
					<!--  #ifdef  H5 -->
					<text v-clipboard:copy="invite_code" v-clipboard:success="onCopyCodeByH5">Copy Invite Code</text>
					<!--  #endif -->
				</view>
			</view>		
		</view>
		<view class="slogan">Share with friends anytime, anywhere</view>
	</view>
</template>

<script>
import fetch from '@/common/fetch.js';
export default {
	data() {
		return {
			title: 'invite friends',
			url: '',
			qr_code_url: '',
			show: '',
			testSrc: '',
			invite_code:'',
			canvasShow: true
		};
	},
	onLoad() {},
	mounted() {
		this.createQcode();
	},
	methods: {
		createQcode() {
			fetch.request('/index/membercard/myshare', null, 'GET').then(res => {
				if (res.code === 0) {
					this.url = res.data.url;
					this.qr_code_url = res.data.qr_code_url;
					this.invite_code = res.data.invite_code;
				}
			});
		},
		onCopy() {
			console.log(this.url);
			uni.setClipboardData({
				data: this.url,
				success: function() {
					uni.showToast({ title: 'Copy successfully！', icon: 'none' });
				}
			});
		},
		onCopyByH5() {
			console.log(this.url);
			uni.showToast({ title: 'Copy successfully！', icon: 'none' });
		},
		/**复制邀请码 */
		onCopyCode(){
				uni.setClipboardData({
				data: this.invite_code,
				success: function() {
					uni.showToast({ title: 'Copy successfully！', icon: 'none' });
				}
			});
		},
		onCopyCodeByH5() {
			uni.showToast({ title: 'Copy successfully！', icon: 'none' });
		},
		onError() {
			uni.showToast({ title: 'error！', icon: 'none' });
		}
	}
};
</script>

<style lang="less" scoped>
	page,body{
		height: 100%;
	}
	.slogan{
		text-align: center;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 20%;
		margin-top: 750rpx;
		width: 100%;
		color: #fff;
		font-size: 34rpx;
		font-weight: 500;
	}
	.invite-wrap{
		width: 100%;
		height: 100%;		
		margin-top: -1px;
		position: relative;
		background: linear-gradient(180deg, #F53D49 0%, #FF7C4D 100%);
	}
	.invite-box{
		width: 650rpx;
		height: 750rpx;
		border-radius: 20rpx;
		background: #fff;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 10%;
		.top{
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-indent: 20rpx;
			background: #f0f0f0;
			border-radius: 20rpx 20rpx 0 0;
			font-size: 30rpx;
			font-weight: bold;
			color: #F53D49;			
		}
	}
	.code-wrap{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		padding: 40rpx 0;
		.tip{
			font-size: 24rpx;
			color: #999;
		}
		.code{
			width: 350rpx;
			height: 350rpx;
			margin-top:50rpx;
		}
	}
	.btn-wrap{
		display: flex;
		justify-content: space-around;
		padding: 0 30rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
		.btn{
			// color: #F53D49;
			font-size: 30rpx;
			font-weight: 500;			
		}
	}
</style>
